<template>
  <view class="main-view">
    <view class="content-view">
      <view id="poster-dome" style="padding: 30rpx;">
        <view class="plan-top">
          <view style="display: flex;justify-content: space-between;">
            <text>投注</text>
            <text style="color: red;font-weight: bold;font-size: 36rpx;">金额{{ detailData.recommendMoney }}元</text>
          </view>
          <view style="display: flex;justify-content: space-between;margin: 20rpx  0;">
            <text>预计开奖时间：{{ detailData.matchDateTime }}</text>
            <text>回报{{ detailData.recommendRatio }}倍</text>
          </view>
          <view>
            <text>竞足过关 </text>
            <text style="color: red;font-weight: bold;font-size: 36rpx;margin-left: 20rpx;">一场 单关</text>
          </view>
        </view>
        <view class="plan-view">
          <view class="plan-left">
            <text class="plan-name">{{ detailData.leagueName }}</text>
            <text class="plan-str">{{ detailData.matchStr }}</text>
          </view>
          <view class="plan-right">
            <view class="p-right-top">
              <text class="p-item-t">{{ detailData.tcHomeName }}</text>
              <text class="p-item-t" style="font-weight: bold;font-size: 28rpx;">{{ detailData.sectionsCore }}</text>
              <text class="p-item-t">{{ detailData.tcAwayName }}</text>
            </view>
            <view class="p-right-bottom">
              <view class="p-item" :class="{ 'active': detailData.winFlag === 'H' }">胜 {{ detailData.tcHRatio }}</view>
              <view class="p-item" :class="{ 'active': detailData.winFlag === 'D' }">平 {{ detailData.tcDRatio }}</view>
              <view class="p-item" :class="{ 'active': detailData.winFlag === 'A' }">负 {{ detailData.tcARatio }}</view>
            </view>
          </view>
        </view>
        <view style="margin-top: 20rpx;">
          <text>方案保存时间：{{ detailData.updateTime }}</text>
        </view>
      </view>
      <u-popup :round="20" :show="show" @close="show = false" mode="center">
        <view class="poster-view">
          <image :src="posterImg"></image>
          <text class="poster-text">长按保存图片</text>
        </view>
      </u-popup>
    </view>
    <view class="btn-view">
      <button type="primary" @click="getPoster">分享图片</button>
    </view>

  </view>
</template>

<script>
import { getFootballChildDetail } from '@/common/api/home'
import html2canvas from 'html2canvas';
import itemView from '@/components/home/itemView.vue';
export default {
  components: {
    itemView
  },
  data () {
    return {
      show: false,
      posterImg: '',
      loading: true,
      detailData: '',
      params: {

        id: null
      }
    }
  },
  onLoad (option) {
    this.params.id = option.id
    console.log(option)
    console.log(option)
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getPoster () {
      html2canvas(document.getElementById(`poster-dome`), {
        backgroundColor: '#f5f5f5',
        useCORS: true,
        allowTaint: true,
        scale: window.devicePixelRatio,
        // dpi: window.devicePixelRatio
      }).then(canvas => {
        let imgurl = canvas.toDataURL('image/png');
        this.posterImg = imgurl
        this.show = true
        console.log(imgurl)
      }).catch(err => {
        console.log(err)
      })
    },
    getDataList () {
      this.loading = true
      getFootballChildDetail(this.params).then(res => {
        console.log(res)
        this.loading = false
        this.detailData = res.data
      })
    },
    sectionChange (index) {
      switch (index) {
        case 0:
          this.params.matchStatus = "U"
          break;
        case 1:
          this.params.matchStatus = "P"
          break;
        case 2:
          this.params.matchStatus = "O"
          break
      }
      console.log(index)
      this.curNow = index;
      this.getDataList()
    }
  }
}
</script>
<style lang="less" scoped>
.poster-view {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .poster-text {
    margin-top: 40rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.main-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-view {
    flex: 1;
  }

  .btn-view {
    padding: 30rpx;
  }

  .p-right-bottom {
    display: flex;
    border: 2rpx solid #fff;
    margin-top: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .p-item {
      flex: 1;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;

      &.active {
        background-color: red;
        color: #fff;
      }

      &:nth-child(2) {
        border: 2rpx solid #fff;
        border-top: none;
        border-bottom: none;
      }
    }

  }

  .plan-top {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background-color: #fff;
    border-radius: 16rpx;
    flex-direction: column;
    margin-bottom: 20rpx;
  }

  .plan-view {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background-color: #fff;
    border-radius: 16rpx;

    .plan-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .plan-name {
        color: #7f2a2a;
        font-size: 24rpx;
      }

      .plan-str {
        margin-top: 10rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

    .plan-right {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-left: 40rpx;

      .p-right-top {
        display: flex;
        justify-content: space-between;

        .p-item-t {
          flex: 1;
          display: flex;
          font-size: 24rpx;
          color: #3d8ce6;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
